<script lang="ts" setup>
import ImageUtil from '/@/utils/loadImage'
const props = defineProps({
  data: {

  }
})


</script>

<template>
  <div class="d-flex flex-row box-container">
    <Image  class="tile-svg"   :src="data.icon" alt=""/>
    <div class="d-flex flex-column" style="margin-left: 17px">
      <div>
        <span class="title">{{data.title}}</span>
        <Image   class="tile-svg-small" v-if="data.showChangeIcon && data.diff != 0 "   :src="data.diff > 0 ? '/statistic/data-up.png':'/statistic/data-down.png'" alt=""/>
      </div>
      <div style="margin-top: 8px;">
        <span class="data">{{data.value}}</span>
        <span class="data-extra">{{data.unit}}</span>
        <span class="data-extra">{{data.dataExtra}}</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.tile-svg {
  width: 78px;
  height: 78px;
}
.tile-svg-small {
  object-fit: contain;
  margin-left: 10px;
  width: 17px;
  height: 17px;
}
.title {
  color: #1D2129;
  font-size: 17.3px;
  line-height: 29px;
}
.data {
  font-weight: bold;
  color: #1D2129;
  font-size: 32px;
  line-height: 38px;
}

.data-extra {
  font-weight: 600;
  font-size: 16px;
  color: #4E5969;
  line-height: 29px;
  letter-spacing: 1px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  margin-left: 4px;
}

.box-container {
  height: 80px;
}
</style>
